<template>
  <div class="qn-video-history-item">
    <div v-if="videoSrc == ''" class="no-video">
      请选择回放视频
    </div>
    <div id="player" v-if="videoSrc != ''" ></div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      videoSrc: '',
      qplayer: ''
    }
  },
  watch: {
    videoSrc(val) {
      if (this.qplayer) {
        this.qplayer.destroy()
        this.qplayer.view && this.qplayer.view.destroy()
      }
      if (!val) return
      /* eslint-disable */
      this.$nextTick(()=>{
        let playerContainer = document.getElementById('player')
        this.qplayer = new QPlayer({
          url: this.videoSrc,
          container: playerContainer,
          autoplay: true,
          loggerLevel: 3,
          hls: { isG711: true }, // 指明该资源为 G711 HLS
          g711Wasm: "https://vaas.newlyai.com/static/aac_wasm.wasm"
        })
      })
    }
  }
}
</script>

<style lang="scss">
  #player{
    height: 100%;
    video{
      object-fit: fill;
    }
  }
  .qn-video-history-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    &.select {
      border: 2px solid $color-danger;
    }
    .video-player {
      width: 100%;
      height: 100%;
    }
    .no-video {
      background: #000;
      color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
